export default {
  data () {
    return {
      dustEchart: null,
      dustOption: {
        title: {
          text: '{a|扬尘(TSP)：}{b|0}',
          textStyle: {
            rich: {
              a: {
                color: '#a8c5ed',
                fontSize: 14
              },
              b: {
                color: '#fff',
                verticalAlign: 'bottom',
                fontSize: 24
              }
            }
          }
        },
        tooltip: {
          trigger: 'axis',
          confine: true,
          backgroundColor: 'rgba(9, 37, 56, 0.5)',
          extraCssText: 'box-shadow: 0 0 5px 2px rgba(8, 69, 69) inset;',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#6a7985'
            }
          }
        },
        legend: {
          right: 0,
          itemWidth: 25,
          itemHeight: 2,
          padding: [7, 0, 0, 0],
          textStyle: {
            color: '#a8c5ed'
          },
          data: [{name: 'TSP', icon: 'rect'}, {name: 'PM10', icon: 'rect'}, {name: 'PM2.5', icon: 'rect'}]
        },
        grid: {
          left: 25,
          right: 25,
          bottom: 0,
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            boundaryGap: false,
            data: ['12:00', '12:30', '13:00', '13:30', '14:00', '14:30', '15:00'],
            axisLabel: {
              color: '#a8c5ed'
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: '#214a60',
                width: 2
              }
            },
            axisTick: {
              show: false
            },
            splitLine: {
              show: false,
              lineStyle: {
                color: '#a8c5ed'
              }
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            name: 'pg/㎡',
            nameTextStyle: {
              color: '#a8c5ed'
            },
            axisLabel: {
              color: '#a8c5ed'
            },
            axisTick: {
              show: false
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: '#214a60',
                width: 2
              }
            },
            splitLine: {
              lineStyle: {
                color: '#214052'
              }
            },
            position: 'right'
          }
        ],
        // dataZoom: [{
        //   type: 'inside',
        //   start: 0,
        //   end: 100
        // }, {
        //   start: 0,
        //   end: 100,
        //   handleSize: '80%',
        //   handleStyle: {
        //     color: '#fff',
        //     shadowBlur: 3,
        //     shadowColor: 'rgba(0, 0, 0, 0.6)',
        //     shadowOffsetX: 2,
        //     shadowOffsetY: 2
        //   }
        // }],
        series: []
      }
    }
  },
  methods: {
    initDust () {
      if (this.dustEchart) {
        this.dustOption.series.forEach(item => {
          item.data = []
        })
        this.$echarts.dispose(this.$refs.environmentalMonitor)
      }
      let today = Number.parseInt(this.$moment().format('HH:mm').replace(/:/g, ''))
      let time = []
      if (this.dustStageData.dustData) {
        time = this.dustStageData.dustData.dust.tsp.map(item => item.time).filter(time => Number.parseInt(time.replace(/:/g, '')) < today)
        this.dustOption.xAxis[0].data = time
        let title = ''
        let max = ''
        if (this.dustStageData.dustData.tspMax) {
          title = '扬尘(TSP)'
          max = this.dustStageData.dustData.tspMax
        }
        if (this.dustStageData.dustData.pmTenMax) {
          title = '扬尘(PM10)'
          max = this.dustStageData.dustData.pmTenMax
        }
        if (this.dustStageData.dustData.pmTwoPointFiveMax) {
          title = '扬尘(PM2.5)'
          max = this.dustStageData.dustData.pmTwoPointFiveMax
        }
        this.dustOption.title.text = `{a|${title}：}{b|${max}}`
        for (let dust in this.dustStageData.dustData.dust) {
          this[dust](today)
        }
      }
      this.dustEchart = this.$echarts.init(this.$refs.environmentalMonitor)
      this.dustEchart.setOption(this.dustOption)
    },
    tsp (today) {
      let TSPData = []
      let TSPAlarm = []
      this.dustStageData.dustData.dust.tsp.forEach((item, index) => {
        if (Number.parseInt(item.time.replace(/:/g, '')) < today) {
          let obj = {
            name: this.dustStageData.tspAlarm,
            value: this.dustStageData.tspAlarm
          }
          if (index === 0) {
            obj.symbol = 'circle'
            obj.symbolSize = 1
            obj.label = {show: true, color: '#a8c5ed', position: [0, -15]}
          } else {
            obj.itemStyle = {opacity: 0}
          }
          TSPAlarm.push(obj)
          TSPData.push(item.value)
        }
      })
      let TSPSeries = {
        name: 'TSP',
        type: 'line',
        areaStyle: {
          color: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [{
              offset: 0, color: 'rgba(63, 175, 119, 0.9)' // 0% 处的颜色
            }, {
              offset: 1, color: 'rgba(63, 175, 119, 0)' // 100% 处的颜色
            }],
            globalCoord: false // 缺省为 false
          }
        },
        itemStyle: {
          color: '#4ed789',
          opacity: 0
        },
        data: TSPData
      }
      let TSPAlarmSeries = {
        name: 'TSP阈值线',
        type: 'line',
        areaStyle: {
          opacity: 0
        },
        label: {
          show: true,
          formatter: 'TSP阈值线'
        },
        itemStyle: {
          color: 'rgba(78, 215, 137, 0.7)'
        },
        lineStyle: {
          width: 1,
          type: 'dashed'
        },
        data: TSPAlarm
      }
      this.dustOption.series.push(TSPSeries)
      this.dustOption.series.push(TSPAlarmSeries)
    },
    pmTen (today) {
      let PMTenData = []
      let PMTenAlarm = []
      this.dustStageData.dustData.dust.pmTen.forEach((item, index) => {
        if (Number.parseInt(item.time.replace(/:/g, '')) < today) {
          let obj = {
            name: this.dustStageData.pmTenAlarm,
            value: this.dustStageData.pmTenAlarm
          }
          if (index === 0) {
            obj.symbol = 'circle'
            obj.symbolSize = 1
            obj.label = {show: true, color: '#a8c5ed', position: [0, -15]}
          } else {
            obj.itemStyle = {opacity: 0}
          }
          PMTenAlarm.push(obj)
          PMTenData.push(item.value)
        }
      })
      let PMTenSeries = {
        name: 'PM10',
        type: 'line',
        areaStyle: {
          color: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [{
              offset: 0, color: 'rgba(1, 181, 203, 0.9)' // 0% 处的颜色
            }, {
              offset: 1, color: 'rgba(1, 181, 203, 0)' // 100% 处的颜色
            }],
            globalCoord: false // 缺省为 false
          }
        },
        itemStyle: {
          color: '#01c9e0',
          opacity: 0
        },
        data: PMTenData
      }
      let PMTenAlarmSeries = {
        name: 'PM10阈值线',
        type: 'line',
        areaStyle: {
          opacity: 0
        },
        label: {
          show: true,
          formatter: 'PM10阈值线'
        },
        itemStyle: {
          color: 'rgba(1, 181, 203, 0.7)'
        },
        lineStyle: {
          width: 1,
          type: 'dashed'
        },
        data: PMTenAlarm
      }
      this.dustOption.series.push(PMTenSeries)
      this.dustOption.series.push(PMTenAlarmSeries)
    },
    pmTwoPointFive (today) {
      let PMTwoPointFiveData = []
      let PMTwoPointFiveAlarm = []
      this.dustStageData.dustData.dust.pmTwoPointFive.forEach((item, index) => {
        if (Number.parseInt(item.time.replace(/:/g, '')) < today) {
          let obj = {
            name: this.dustStageData.pmTwoPointFiveAlarm,
            value: this.dustStageData.pmTwoPointFiveAlarm
          }
          if (index === 0) {
            obj.symbol = 'circle'
            obj.symbolSize = 1
            obj.label = {show: true, color: '#a8c5ed', position: [0, -15]}
          } else {
            obj.itemStyle = {opacity: 0}
          }
          PMTwoPointFiveAlarm.push(obj)
          PMTwoPointFiveData.push(item.value)
        }
      })
      let PMTwoPointFiveSeries = {
        name: 'PM2.5',
        type: 'line',
        areaStyle: {
          color: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [{
              offset: 0, color: 'rgba(34, 113, 214, 0.9)' // 0% 处的颜色
            }, {
              offset: 1, color: 'rgba(34, 113, 214, 0)' // 100% 处的颜色
            }],
            globalCoord: false // 缺省为 false
          }
        },
        itemStyle: {
          color: '#2582fb',
          opacity: 0
        },
        data: PMTwoPointFiveData
      }
      let PMTwoPointFiveAlarmSeries = {
        name: 'PM2.5阈值线',
        type: 'line',
        areaStyle: {
          opacity: 0
        },
        label: {
          show: true,
          formatter: 'PM2.5阈值线'
        },
        itemStyle: {
          color: 'rgba(1, 181, 203, 0.7)'
        },
        lineStyle: {
          width: 1,
          type: 'dashed'
        },
        data: PMTwoPointFiveAlarm
      }
      this.dustOption.series.push(PMTwoPointFiveSeries)
      this.dustOption.series.push(PMTwoPointFiveAlarmSeries)
    }
  }
}
